import React from "react";
import { Container } from "./MiHomeStyle"
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper';
import Scroll from '../../../baseUI/scroll/index'

import 'swiper/css'
import 'swiper/css/autoplay'

import home1 from '../../../assets/mainIconfont/home1.png'
import home2 from '../../../assets/mainIconfont/home2.png'
import home3 from '../../../assets/mainIconfont/home3.png'
import home4 from '../../../assets/mainIconfont/home4.png'
import home5 from '../../../assets/mainIconfont/home5.png'
import home6 from '../../../assets/mainIconfont/home6.png'

const Location = () => {

  return (
    <Container>
      <div className="card">
        <div className="title">
          <span className="text">小米之家</span>
          <Swiper
            modules={[Autoplay]}
            autoplay={{
              disableOnInteraction: false
            }}
            loop
            direction="vertical"
          >
            <SwiperSlide>专属店员·专享服务</SwiperSlide>
            <SwiperSlide>到店自取·闪电拿货</SwiperSlide>
            <SwiperSlide>新品爆款·抢先体验</SwiperSlide>
          </Swiper>
          <span className="smallText">更多 <svg t="1642045673519" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1717" width="15" height="15"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="1718" fill="#999999"></path></svg></span>
        </div>
        <Scroll
        // 使用传参修改Scroll 的默认一些属性
        direction={"horizental"}  bounceLeft={false}  bounceRight={false}
        >
          <div className="container">
            <div className="smallCard">
              <div className="location">
                <div className="text1">小米之家江西南昌</div>
                <div className="text2">到店自取</div>
                <div className="text3">距您1.39km</div>
                <div className="cardBox">
                  <img src={home1} alt="" />
                  <div className="phoneName">Xiaomi 12 Pro</div>
                  <div className="welcome">欢迎到店体验</div>
                </div>
              </div>
            </div>
            <div className="smallCard">
              <div className="location">
                <div className="text1">小米之家江西南昌</div>
                <div className="text2">到店自取</div>
                <div className="text3">距您1.39km</div>
                <div className="cardBox">
                  <img src={home2} alt="" />
                  <div className="phoneName">小米小爱音箱 Play</div>
                  <div className="welcome">￥99</div>
                </div>
              </div>
            </div>
            <div className="smallCard">
              <div className="location">
                <div className="text1">小米之家江西南昌</div>
                <div className="text2">到店自取</div>
                <div className="text3">距您1.39km</div>
                <div className="cardBox">
                  <img src={home3} alt="" />
                  <div className="phoneName">Xiaomi 12X</div>
                  <div className="welcome">￥3199 起</div>
                </div>
              </div>
            </div>
            <div className="smallCard">
              <div className="location">
                <div className="text1">小米之家江西南昌</div>
                <div className="text2">到店自取</div>
                <div className="text3">距您1.39km</div>
                <div className="cardBox">
                  <img src={home4} alt="" />
                  <div className="phoneName">Xiaomi 12</div>
                  <div className="welcome">￥3699 起</div>
                </div>
              </div>
            </div>
            <div className="smallCard">
              <div className="location">
                <div className="text1">小米之家江西南昌</div>
                <div className="text2">到店自取</div>
                <div className="text3">距您1.39km</div>
                <div className="cardBox">
                  <img src={home5} alt="" />
                  <div className="phoneName">小米极简都市双肩包 2</div>
                  <div className="welcome">￥ 129</div>
                </div>
              </div>
            </div>
            <div className="smallCard">
              <div className="location">
                <div className="text1">小米之家江西南昌</div>
                <div className="text2">到店自取</div>
                <div className="text3">距您1.39km</div>
                <div className="cardBox">
                  <img src={home6} alt="" />
                  <div className="phoneName">米家水离子吹风机</div>
                  <div className="welcome">￥169</div>
                </div>
              </div>
            </div>
          </div>
        </Scroll>
        </div>
      
    </Container>
  )
}

export default Location